<template>
  <div>
    <div class="rotation">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/283528c23a936efb1d51fe47039a82e7.jpg?thumb=1&w=720&h=360"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/283528c23a936efb1d51fe47039a82e7.jpg?thumb=1&w=720&h=360"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/283528c23a936efb1d51fe47039a82e7.jpg?thumb=1&w=720&h=360"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/283528c23a936efb1d51fe47039a82e7.jpg?thumb=1&w=720&h=360"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="swiper-container1 choicelists">
      <div class="swiper-wrapper">
        <div class="swiper-slide choice_box">
          <div class="choice_box01">
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
          </div>
          <div class="choice_box02">
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
          </div>
        </div>
        <div class="swiper-slide choice_box">
          <div class="choice_box01">
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
          </div>
          <div class="choice_box02">
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
            <div class="choice">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FcrYNw7uwK6KqqI8YfzIv2w.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643367222&t=a86624d2e747eab0fd775fe842a0d5eb"
              />
              <span>得物女孩</span>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="logo">
      <img src="../../assets/imgs/分类购物.png" alt="" />
    </div>
    <div class="commodity_box">
      <div
        class="commodity"
        v-for="(item, index) in goodsLists"
        :key="index"
        @click="$router.push('/shopping/details?id='+item.goods_id)"
      >
        <div class="commodity_img">
          <img :src="item.goods_img" />
        </div>
        <div class="commodity_text">
          <p class="p">{{ item.goods_test }}</p>
          <div class="price">
            <span class="price_left">￥{{ item.goods_price }}</span
            ><span class="price_right">{{ item.goods_price_num }}人付款</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  props:["goodsLists"],
  data: function () {
    return {
    };
  },
  mounted() {
    console.log(this.goodsLists);
    new Swiper(".swiper-container1", {
      pagination: ".swiper-pagination",
      paginationClickable: true,
    });
  },
};
</script>

<style lang="less">
.rotation {
  background-color: #fff;
}
.choicelists {
  width: 100%;
  padding-bottom: 20px;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  .choice_box {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    // overflow: hidden;
    .choice_box01 {
      display: flex;
      justify-content: space-between;
      .choice {
        padding-bottom: 20px;
        img {
          width: 40px;
          height: 30px;
        }
        span {
          display: block;
          font-size: 12px;
          transform: scale(0.8) translateX(-5px);
        }
      }
    }
    .choice_box02 {
      display: flex;
      justify-content: space-between;
      .choice {
        img {
          width: 40px;
          height: 30px;
        }
        span {
          display: block;
          font-size: 12px;
          transform: scale(0.8) translateX(-5px);
        }
      }
    }
  }
  .swiper-pagination-bullets {
    bottom: 5px;
  }
  .swiper-pagination-bullet {
    width: 24px;
    height: 2px;
    margin: 0 2px !important;
    border-radius: 0;
  }
  .swiper-pagination-bullet-active {
    background: #212028;
  }
}
.commodity_box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .commodity {
    width: 50%;
    background-color: #fff;
    .commodity_img {
      display: flex;
      justify-content: center;
      align-content: center;
      img {
        width: 100%;
      }
    }
    .commodity_text {
      .p {
        padding: 0px 15px;
        font-size: 12px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .price {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px 15px;
        font-size: 12px;
        .price_left {
          font-weight: bold;
        }
        .price_right {
          transform: scale(0.9);
          color: #b0b0b2;
        }
      }
    }
  }
}
</style>